<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div class="frequency">
    <Row :gutter="10">
      <Card class="card">
        <div class="table-head">
          月份：
          <DatePicker type="month"
                      format="yyyy-MM"
                      :confirm="true"
                      :transfer="true"
                      :editable="false"
                      :clearable="false"
                      split-panels
                      @on-ok="DatePickerOK"
                      @on-clear="DatePickerOnClear"
                      @on-open-change="DatePickerOnOpenChange"
                      placement="bottom-start"
                      placeholder="请选择月份"
                      v-model="DatePickerValue"
                      style="width: 200px"></DatePicker>
          &nbsp;&nbsp;
          部门：
          <Select v-model="department" :transfer="true" @on-change="onChangeDepartment" style="width:200px">
            <Option v-for="item in departmentArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <Row class="margin-top-10 row charts-div">
          <div class="charts" id="charts">
            <charts-bar
              v-if="charts_xDataArr.length > 0 && charts_yDataArr.length > 0"
              :visite_volume_id="charts_id"
              :xDataTitle="charts_title"
              :xDataArr="charts_xDataArr"
              :yDataArr="charts_yDataArr"
              :Data_series_name="charts_series_name"
            ></charts-bar>
            <div class="not-charts" v-if="!(charts_xDataArr.length > 0 && charts_yDataArr.length > 0)">
              <div class="show">暂无统计信息</div>
            </div>
          </div>
        </Row>
      </Card>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import chartsBar from '../home/components/chartsBar.vue';
  export default {
    components: {
      chartsBar
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        data: [],
        dataDetail: {},
        initTable: [],
        DatePickerValue: '',
        Month: '',
        department: 1,
        departmentArr: '',
        charts_id: 'frequency_div_id',
        charts_title: '',
        charts_series_name: '出勤率',
        charts_xDataArr: [],
        charts_yDataArr: [],
      };
    },
    created: function () {
      var _this = this;
      // 当前月
      var day1 = new Date();
      var endyear = Utils.fix(day1.getFullYear(), 4);
      var endmonth = Utils.fix(parseInt(day1.getMonth() + 1), 2);
      var Month = endyear + "-" + endmonth;
      _this.DatePickerValue = Month;
      _this.Month = Month;

      _this.getDepartmentArr();
      _this.getData();
    },
    mounted () {
      var _this = this;
    },
    methods: {
      DatePickerOK: function () {
        var _this = this;
      },
      DatePickerOnClear: function () {
        var _this = this;
        _this.DatePickerValue = '';
      },
      DatePickerOnOpenChange: function (open) {
        var _this = this;
        if (open == false) {// 关闭了日历
          var DatePickerValue = _this.DatePickerValue;
          if (DatePickerValue && DatePickerValue != '') {
            var day1 = new Date(DatePickerValue);
            var endyear = Utils.fix(day1.getFullYear(), 4);
            var endmonth = Utils.fix(parseInt(day1.getMonth() + 1), 2);
            var Month = endyear + "-" + endmonth;
            _this.Month = Month;
            _this.getData();
          }
        }
      },
      onChangeDepartment: function (did) {
        var _this = this;
        _this.department = did;
        _this.getData();
      },
      getData () {
        var _this = this;
        if (_this.Month == '') {
          _this.$Message.error('请选择月份!');
          return false;
        }
        _this.charts_xDataArr = [];
        _this.charts_yDataArr = [];
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          date: _this.Month,
          department: _this.department,
        };
        var params = {
          url: '/clock/statistical/list',
          //domain: 'http://sd.jnaw.top/sd2-mock',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var charts_xDataArr = [];
            var charts_yDataArr = [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var name = _data[k].name;
              var frequency = _data[k].frequency;
              charts_xDataArr.push(name);
              charts_yDataArr.push(frequency);
            }
            var timestamp = new Date().getTime();
            var random = Utils.getRandom();
            _this.charts_id = timestamp + random;
            _this.charts_xDataArr = charts_xDataArr;
            _this.charts_yDataArr = charts_yDataArr;
          } else {
            _this.$Message.error('统计信息失败!');
          }
        }
      },
      getDepartmentArr () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'all',
        };
        var params = {
          url: '/department/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.departmentArr = [];
            _this.childrenDate(_data);
          } else {
            _this.$Message.error('查询部门信息失败!');
          }
        }
      },
      childrenDate: function (Arr) {
        var _this = this;
        for (var k in Arr) {
          if (!Arr[k]) {
            continue;
          }
          var id = Arr[k].id;
          var name = Arr[k].name;
          var children = Arr[k].children || [];
          var obj = {
            id: id,
            name: name,
          };
          _this.departmentArr.push(obj);
          _this.childrenDate(children);
        }
      },

    }
  };
</script>
